<!--
 * @Description:
 * @version:
 * @Author: 尹鹏孝
 * @Date: 2023-03-03 13:31:08
 * @LastEditors: 尹鹏孝
 * @LastEditTime: 2023-03-08 10:53:32
-->
<script setup>
import { ref } from 'vue'

defineProps({
  msg: String,
})

const count = ref(0)
</script>
<script>
import { _ } from 'lodash'
import about from './about.vue'
import search from './search.vue'
import mmg from './mmg.vue'
export default {
  components:{about,search},

  data() {
    return {
      firstName:"John",
      lastName:"Doe",
      text:"",
      msg:null,
      header:1234566,
      searchText:null,
      headerProps:{
        name:"1123344"
      },
      first:
      111,
      last:222
    }
  },
  computed:{
    fullName:{
      get(){
        return this.firstName+ " "+ this.lastName
      },
      set(newValue){
        [this.firstName,this.lastName] = newValue.split(' ');
      }
    }
  },
  created() {
    this.debouncedClick = _.debounce(this.click, 500)
  },
  mounted() {
    //  this.$loading().show()
    console.log(this.count);
  },
  unmounted() {
    // 最好是在组件卸载时
    // 清除掉防抖计时器
    this.debouncedClick.cancel()
  },
  provide(){
    return {
      provideMsg:'provide-msg',
      mmg:'MMS',

    }



  },
  methods: {
    stopEvent(){
      console.log(12223);
    },
      click() {
      // ... 对点击的响应 ...
      console.log(12222)
      this.firstName=1234;
    },
    prevent(){
      console.log(1234567);
    },
    parentEvent(){
      console.log(78910);
    },
    doThisCapture(){
      console.log("doThisCapture")
    },
    once(){
      console.log('once-once')
    },
    passive(){
      console.log(123456);
    },
    onClick(){
      console.log(1)

    },
    ddd(res){
    //alert(this.count)
      // console.log(res)
      this.$refs.dddd.increment()
    }
  },
  inject:['ddsty']
}
</script>

<template>
  <mmg :title="'ypx'" :name="'223344'" @click="ddd" ref="dddd"></mmg>
  <h1>{{ msg }}</h1>

  <p>{{ msg }}</p>

  <div class="card" id="card">
    <p>{{ fullName }}</p>
    <button type="button" @click="count++, isNaN(firstName) ? 1234 : firstName++">count is {{ count }}</button>
    <button type="button" @click="debouncedClick">count is {{ count }}</button>
    <p>事件修饰符</p>
    <button @click.stop="stopEvent">stop</button>

    <div @click.self="parentEvent">
      fdsafdsafsafas
      <button @click.self="prevent">.prevent</button>
      dsafdsafdsafdsafdas
    </div>

    <div @click.capture="doThisCapture">
      hhhh
      <button @clcik="console.log(111)">测试内部事件。capture</button>
    </div>
    <div>
      <button @click.once="once">once{{ firstName }}</button>
    </div>
    <div @scroll.passive="passive" style="overflow: auto;height: 400px;">
      <div v-for="list in 20000" :key="list">{{ list }}</div>
    </div>
    <div>
      <!-- exact://严谨的 -->
      <button @click.ctrl="onClick">A</button>
      <button @click.ctrl.exact="onClick">exact-ctrl</button>
      <button @click.exact="onClick">exact</button>
    </div>


    <p>
      Edit
      <code>components/HelloWorld.vue</code> to test HMR


    </p>
    <form class="form">
      <input :value="text" @input="event => text = event.target.value">
      {{ text }}


      <input :value="msg" />
      {{ msg }}
    </form>
  </div>

  <p>
    Check out
    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank">create-vue</a>, the official Vue + Vite
    starter
  </p>
  <p>
    Install
    <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
    in your IDE for a better DX
  </p>
  <p class="read-the-docs">Click on the Vite and Vue logos to learn more

    {{ searchText }}
  </p>
  <about :headerProps="headerProps" v-model="searchText">
    <template #header>
      dsafasdf-dsafdsafafd=======================dsafdsaf
    </template>
    <template #[dynamicSlotName]>
      ...
    </template>
  </about>
  <Teleport to="#card">
    <search v-model:first-name="first" v-model:last-name="last" />
  </Teleport>
  {{ ddsty }}

</template>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>
